{% extends "auth-menu.html" %}
{% load tag %}
{% block head %}

{#  没有需要加载的文件#}
 {% endblock %}

{% block display1 %}
    "display: block"
{% endblock %}

{% block active1 %}
    'active'
{% endblock %}

{% block active_updowncars %}
    'active'
{% endblock %}


{% block main %}
   <div class='span12'>
        <div class='page-header'>
            <h1 class='pull-left'>
                <i class='icon-edit'></i>
                <span>数据源展示</span>
            </h1>
            <div class='pull-right'>
                <ul class='breadcrumb'>
                    <li>
                        <a href="/index"><i class='icon-bar-chart'></i>
                        </a>
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li>
                        数据源统计
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li class='active'>空重车分析</li>
                </ul>
            </div>
        </div>
    </div>
{#{% for i in gps_data_list %}#}
{#    {% print i %}#}
{#    {% endfor %}#}
<div class='group-header '>
    <div class='row-fluid'>
        <div class='span6 offset3'>
            <form accept-charset="UTF-8" class="navbar-search pull-left hidden-phone" method="get" />
                <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
                时间： <input type="text"  value="{{ date }}" name="date" id="datetimepicker"  />

            <button class="btn btn-link icon-search " name="button" type="submit"></button>
    <a class="btn btn-primary" download={{ updown_file }} href='/bootstrap/tmp/{{ updown_file }}' >数据总览下载</a>&nbsp&nbsp&nbsp&nbsp
    <a class="btn btn-info" download={{ updown_detail_file }} href='/bootstrap/tmp/{{updown_detail_file }}' >车辆明细下载(近七天)</a>&nbsp&nbsp&nbsp&nbsp
</form>
        </div>
    </div>
</div>

{#<div class='group-header'>#}
{#    <div class='row-fluid'>#}
{#        <div class='span6 offset3'>#}
{#            <div class='text-center'>#}
{#                <h2>Dynamic tables</h2>#}
{#                <small class='muted'>Dynamic datables can handle large data collections, sorting, filtering...</small>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{#</div>#}

<div class='row-fluid'>
    <div class='span12'>
    <div id="main1" style="width: 100%;height: 800px;"></div>
    <script type="text/javascript">

var Chart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据

    Chart1.showLoading({
        text: '正在努力的读取数据中...'
    });

var labelFromatter = {
    normal : {
        label : {
            formatter : function (params){
                return ''
            },
            textStyle: {
                baseline : 'top'
            }
        }
    },
}
var labelTop = {
    normal : {
       color: '#000000',
        label : {
            show : true,
            position : 'center',
            formatter : ' {a}',
            textStyle: {
                fontSize : 16,
                baseline : 'bottom'
            }
        },
        labelLine : {
            show : false
        }
    }
};
var labelBottom = {
    normal : {
 color: '#808080',
        label : {
            show : true,
            position : 'center'
        },
        labelLine : {
            show : false
        }
    },

};

var labeldiy = {
    normal : {
		 color: '#FF3333',
        label : {
            show : true,
            position : 'center'
        },
        labelLine : {
            show : false
        }
    },

};

var radius = [40, 55]; //每个 饼图的大小
option = {
  tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b}切换次数: {c}辆 ({d}%)"
    },
    legend: {
       show : true,
        x : 'left',
        y : 'top',
        data:[
            '切变小于50','切变大于等于50小于等于100','切变大于100'

        ]
    },
    title : {
        text: '出租车数据源切换情况',
        subtext: '只显示切换过',
        x: 'center'
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},

            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {% for n in data %}
        {
            name :'{{ n.数据源 }} \n {{ n.切换车辆总数 }}辆',
            type : 'pie',
            center :{{ n.center|safe }},
            radius : radius,
            itemStyle : labelFromatter,
            data : [

              {name:'切变大于100', value:{{ n.切变大于100 }}, itemStyle : labelBottom},
              {name:'切变小于50', value:{{ n.切变小于50 }}, itemStyle : labeldiy},
              {name:'切变大于等于50小于等于100', value: {{ n.切变大于等于50小于等于100 }}, itemStyle : labelTop},
            ]
        },
        {% endfor %}

    ]
};


    Chart1.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart1.hideLoading();


    </script>
</div>

</div>



<hr class='hr-double' />

</div>
</div>
</div>
</section>
</div>
{% endblock %}

{% block script %}

{#表格JS#}
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.min.js' type='text/javascript'></script>
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.columnFilter.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/plugins/common/bootstrap-wysihtml5.js' type='text/javascript'></script>

<!-- / naked password -->
<script src='/bootstrap/assets/javascripts/plugins/naked_password/naked_password-0.2.4.min.js' type='text/javascript'></script>
<!-- / nestable -->
<script src='/bootstrap/assets/javascripts/plugins/nestable/jquery.nestable.js' type='text/javascript'></script>
{#<!-- / tabdrop -->#}
<script src='/bootstrap/assets/javascripts/plugins/tabdrop/bootstrap-tabdrop.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/tables.js' type='text/javascript'></script>
<!-- / max length -->
<script src='/bootstrap/assets/javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min.js' type='text/javascript'></script>
<!-- / timeago -->
<script src='/bootstrap/assets/javascripts/plugins/timeago/jquery.timeago.js' type='text/javascript'></script>

<!-- / autosize (for textareas) -->
<script src='/bootstrap/assets/javascripts/plugins/autosize/jquery.autosize-min.js' type='text/javascript'></script>
<!-- / charCount -->
<script src='/bootstrap/assets/javascripts/plugins/charCount/charCount.js' type='text/javascript'></script>
<script>

$.datetimepicker.setLocale('ch');

{#$('#datetimepicker_format').datetimepicker({format: $("#datetimepicker_format_value").val()});#}
{#console.log($('#datetimepicker_format').datetimepicker('getValue'));#}

$("#datetimepicker_format_change").on("click", function(e){
	$("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({format: $("#datetimepicker_format_value").val()});
});
$("#datetimepicker_format_locale").on("change", function(e){
	$.datetimepicker.setLocale($(e.currentTarget).val());
});

$('#datetimepicker').datetimepicker({
dayOfWeekStart : 1,
lang:'ch',
timepicker:false,
format:"Y-m-d",
{#disabledDates:['1986/01/08','1986/01/09','1986/01/10'],#}
{#startDate:	'1986/01/05'#}
});
{#$('#datetimepicker').datetimepicker({value:{{ date|date:"Y-m-d H:i" }}, step:10});#}
{#$('#datetimepicker').datetimepicker({ step:10});#}
</script>
{% endblock %}
